<template>
<!--  @ok="handleSubmit"-->

  <BasicModal
    v-bind="$attrs"
    @register="register"
    showFooter
    :title="getTitle"
    width="80%"
    @ok="handleSubmit"
    @cancel="closeFn"
  >

<!--    <Form  class="lqforder-h-group" :model="formState" ref="formRef">-->
<!--      <FormItem label="费用名称" :required="true" name="mouldName"><Input v-model:value="formState.mouldName" placeholder="请输入费用名称" style="width: 237px;"></Input></FormItem>-->
<!--    </Form>-->
<!--    <div v-show="!checked" style="height: 600px">-->
<!--      -->
<!--    </div>-->
<!--    <BasicTable @register="registerTable" >-->

<!--    </BasicTable>-->

    <div style="overflow: hidden; width: 100%; height: 625px;">
      <VxeBasicTable ref="tableRef" v-bind="gridOptions">
      </VxeBasicTable>
    </div>

  </BasicModal>
</template>
<script lang="ts" setup>

/**
 *  选择ms采购单
 */

import {ref, computed, unref, reactive} from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import {BasicTable, useTable, TableAction, FormSchema} from '@/components/Table';
import { vxeTableFormSchema} from "@/views/msManage/purchaseOrderList/role.data";

import {
  BasicTableProps,
  VxeBasicTable,
  VxeGridInstance,
  VxeGridListeners,
  VxeGridPropTypes
} from '@/components/VxeTable';


  const props = defineProps({
    supplierName: { type: String, default: '' },
    mode: { type: String,default:"multiple" },
    isAdd: {type:Boolean,default:false},
  });
import {
  materialTableListApi,
  purchaseOrderTableListApi,
  supplierTableListApi
} from "@/api/sys/msUser";
  import { Form,FormItem,Switch,Input } from 'ant-design-vue';

  import {useMessage} from "@/hooks/web/useMessage";

  const emit = defineEmits(['success', 'register']);
  const isUpdate = ref(true);
  const { createMessage } = useMessage();
  const formRef=ref();
  const checked=ref(false);
  const formState=ref({});

  const columns: VxeGridPropTypes.Columns = [
    { type: 'checkbox', width: 60, align: 'center' },
    {
      title: 'ms采购单号',
      field: 'orderNo',
      align: 'center',
      showOverflow: 'title',
      width: 130,
    },
    {
      title: '采购金额',
      field: 'orderPrice',
      align: 'center',
      width: 80,
    },
    // {
    //   title: '供应商编号',
    //   width: 100,
    //   dataIndex: 'supplierNo',
    // },
    {
      title: '供应商名称',
      field: 'supplierName',
      showOverflow: 'title',
      width: 170,
    },
    {
      title: '下单日期',
      field: 'orderDate',
      align: 'center',
      width: 110,
    },

    {
      title: '物料编号',
      field: 'materialNo',
      width: 100,
      //mp3Url remoteUrl
    },
    {
      title: '物料型号',
      width: 100,
      align: 'center',
      filters: [{ data: '' }],
      filterRender: {
        name: 'VxeInput',
      },
      field: 'model',
    },
    {
      title: '物料名称',
      field: 'materialName',
      showOverflow: 'title',
      width: 100,
    },
    {
      title: '物料规格',
      field: 'specification',
      showOverflow: 'title',
      width: 170,
    },
    {
      title: '下单数量',
      field: 'orderNum',
      align: 'center',
      width: 80,
    },
    {
      title: '备注',
      field: 'remark',
      showOverflow: 'title',

      width: 120,
    },


    {
      title: '批号',
      field: 'no',
      showOverflow: 'title',
      width: 130,
    },
    {
      title: '下单人',
      field: 'userName',
      width: 100,
      filters: [{ data: '' }],
      filterRender: {
        name: 'VxeInput',
      },
    },

  ];



const tableRef = ref<VxeGridInstance>();

const gridOptions = reactive<BasicTableProps>({
  id: 'VxeTable',
  keepSource: true,
  editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
  showOverflow: true,
  size:"mini",
  height: 'auto',
  columns,
  toolbarConfig: {
    buttons: [
      // {
      //   content: '新增',
      //   buttonRender: {
      //     name: 'AButton',
      //     props: {
      //       type: 'primary',
      //       preIcon: 'mdi:page-next-outline',
      //     },
      //     events: {
      //       click: () => {
      //         // tableRef.value?.insert({ name: '新增的' });
      //         // createMessage.success('新增成功');
      //         handleCreate();
      //       },
      //     },
      //   },
      // },
    ],
    enabled:false//禁用右侧打印等工具栏
  },
  radioConfig: {
    highlight: true
  },
  formConfig: {

    enabled : true,
    items: vxeTableFormSchema,

  },
  rowConfig: {
    labelField: 'orderNo',
    trigger: 'row'
  },
  proxyConfig: {
    props:{
      result:"data.list",
      list:"data.list",
      total:"data.totalResult",
      message:"message"
    },
    ajax: {
      query: async ({ page, form }) => {
        return purchaseOrderTableListApi({
          page: page.currentPage,
          pageSize: page.pageSize,
          IfXuNiJian:0,
          ...form,
        });
      },
      // queryAll: async ({ form }) => {
      //   return await demoListApi(form);
      // },
    },
  },
});

  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //orderNo用于判断是否切换为输入框模式
    // if(data.orderNo){
    //   checked.value=false;
    // }else{
    //   if(data.isUpdate){
    //     checked.value=true;
    //     formState.value.mouldName=data.materialName
    //   }else{
    //     checked.value=false;
    //   }
    //
    // }

    if(props.supplierName){

      gridOptions.formConfig.items[1].itemRender.defaultValue=props.supplierName;


    }
    tableRef.value?.commitProxy("reload")
    //reload()
  });


  const getTitle = ref("选择 非虚拟件采购单物料");


  async function handleSubmit() {
    let selectRows = tableRef.value.getCheckboxRecords();

    // if(!checked.value){
    // }else{
    //   formRef.value.validate()
    //     .then(() => {
    //       let value=formState.value.mouldName;
    //       if(!value){
    //         createMessage.error("请输入费用名称!");
    //         return false;
    //       }
    //       let result={type:"txt",value};
    //       emit('success',result);
    //       closeFn();
    //     })
    //     .catch(err => {
    //       console.log('error', err);
    //     });
    //
    // }
    if(!selectRows){
      createMessage.error("请先勾选物料!");
      return false;
    }
    emit('success',selectRows);
    closeFn();


  }
  function closeFn(){
    // tableRef.value.clearRadioRow();
    tableRef.value.commitProxy('reload')
    closeModal()
  }

</script>
<style lang="less">
.lqforder-h-group{
  display: flex;
  padding-left: 6.5%;
  justify-items: center;
  margin-bottom: 18px;
  .g-lable{
    margin-right: 8px;
    align-items: center;
    display: flex;
  }
}
</style>
